<template>
<!-- 添加联系人 -->
<div >

<!--  <el-page-header @back="goBack" title="行政" content="编辑联系人" ></el-page-header>-->

  <!--  分割线  -->
  <el-divider class="head"></el-divider>
<!-- // 用于限制宽度 -->
<div class="div-main">
  <el-row>
    <el-col :span="1.5">
     <div>
    <el-divider class="heads"  direction="vertical"></el-divider>
    <b>基本资料:</b>  </div>
    </el-col>
  </el-row>
  <!--  分割线  -->
  <el-divider class="head"></el-divider>
<!--  添加表单  -->
  <el-form  size="medium" :model="AdmContactsData" label-width="1px" :rules="rule" :status-icon=true  label-position="top" >

    <el-row>
      <el-col :span="11">
    <el-form-item  label="单位名称:" prop="unitname" :required='true'>
      <el-input  placeholder="单位名称" v-model="AdmContactsData.unitname" ></el-input>
    </el-form-item>
      </el-col>

      <el-col :span="11" :push="2">
    <el-form-item  label="联系人:" :required='true' prop="contactName">
      <el-input placeholder="联系人" v-model="AdmContactsData.contactName"></el-input>
    </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
    <el-form-item label="手机号码:" :required='true' prop="contactPhone">
      <el-input placeholder="手机号码" v-model="AdmContactsData.contactPhone"></el-input>
    </el-form-item>
      </el-col>
    </el-row>
<!------------------------------------- 选填 ----------------------------------------------------->
    <el-row>
      <el-col :span="1.5">
        <div>
          <el-divider class="heads"  direction="vertical"></el-divider>
          <b>其他选填</b>  </div>
      </el-col>
      <el-col :span="2"  :push="2">
        <el-button type="primary" plain size="mini" round @click="shouqi">{{shouqiBtnText}}</el-button>
      </el-col>
    </el-row>
    <!--  分割线  -->
    <el-divider class="head"></el-divider>
    <transition name="slide-fade">
<div v-show="qiteStatus">
    <el-row>
      <el-col :span="11">
        <el-form-item  label="部门:"  >
          <el-input  placeholder="部门" v-model="AdmContactsData.contactDept"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="11" :push="2">
        <el-form-item  label="职位:" >
          <el-input placeholder="职位" v-model="AdmContactsData.contactPost"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

  <el-row>
    <el-col :span="11">
      <el-form-item  label="固定电话:" prop="contactTel" >
        <el-input  placeholder="固定电话" v-model="AdmContactsData.contactTel"></el-input>
      </el-form-item>
    </el-col>

    <el-col :span="11" :push="2">
      <el-form-item  label="邮箱:" prop="contactEmail" >
        <el-input placeholder="邮箱" v-model="AdmContactsData.contactEmail"></el-input>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      <el-form-item  label="详细地址:">
        <el-input placeholder="详细地址" v-model="AdmContactsData.contactAddress"></el-input>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row>
    <el-col>
      <el-form-item  label="备注:">
        <el-input placeholder="备注" v-model="AdmContactsData.remark"></el-input>
      </el-form-item>
    </el-col>
  </el-row>

</div>
    </transition>

    <el-row>
      <el-col :span="5">
        <el-form-item>
          <el-button size="medium" type="primary" plain @click="saveOrUpdate" >确定提交</el-button>
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item>
          <el-button size="medium" type="primary" plain @click="goBack" >返回</el-button>
        </el-form-item>
      </el-col>

    </el-row>

</el-form>

</div>

</div>

</template>

<script>
export default {
  name: "AddAdmContacts",
  data(){
    return{
      shouqiBtnText:"收起",//收起按钮显示
      qiteStatus:true,//控制其他选填显示
      AdmContactsData:{},//存放添加表单的数据
      rule:{//表单验证
        unitname:[{required: true, message: '请输入单位', trigger: 'blur'}],
        contactName:[{required: true, message: '请输入联系人', trigger: 'blur'}],
        contactPhone:[
            {required: true, message: '请输入电话', trigger: 'blur'},
            {pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ , message: '请正确输入电话', trigger: 'blur'}],
        contactEmail:[//邮箱验证
          {type:"email",message:"请输入正确邮箱", trigger: 'blur'  }
        ],
        contactTel:[//固定电话验证
          {pattern : /^0\d{2,3}-?\d{7,8}$/ ,message:"请输入正确号码",trigger:"blur"}
        ]

      }
    }
  },
  created() {
    this.init()
  },
  methods:{
    goBack(){this.$router.go(-1);}, //返回上一个页面
    init() {

      //判断路由是否有路由参数
      if (this.$route.params && this.$route.params.id) {
        this.selectByid(this.$route.params.id);
      }
    },
    saveOrUpdate(){
      if(this.AdmContactsData.id){//如果有id 调用修改
            this.updateByid();
      }else {  //否则调用添加
        this.addAdmContactsFun();
      }
    },
    shouqi(){//收起按钮

      this.qiteStatus=!this.qiteStatus//修改显示状态
      if(this.qiteStatus==true){
        this.shouqiBtnText="收起"
      }else{
        this.shouqiBtnText="展开"
      }
    },
    addAdmContactsFun(){//添加方法
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.post("admContacts",this.AdmContactsData)
      .then( () => {

        setTimeout(() => {
          loading.close();
        });

        this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.$router.push({name: "admaddresslist"})
      })
      .catch()

    },
    selectByid(id){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.get(`admContacts/${id}`)
          .then(res => {
            this.AdmContactsData=res.data.data
            setTimeout(() => {
              loading.close();
            });
          })
          .catch()
    },
    updateByid(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.put("admContacts",this.AdmContactsData)
          .then( () => {
            setTimeout(() => {
              loading.close();
            });
            this.$message({
              message: '修改成功!',
              type: 'success'
            });
            this.$router.push({name: "admaddresslist"})
          })
          .catch()
    }
  }
}
</script>

<style scoped>



.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

.heads{
width: 3px;
  background-color: #409EFF;
  height: 19px;
}

.div-main{
  width: 70%;
  text-align: left;
}


/* 显示/隐藏  过渡动画  */
.slide-fade-enter-active {transition: all .2s ease;}
.slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.slide-fade-enter, .slide-fade-leave-to{transform: translateX(5px);opacity: 0;}
</style>